var staticData = [
  [{ title: "新闻发布会暨开幕式", time: "8:20—9:00", timeInfo: "", addressBrief: "", address: "郑州旅游职业学院一楼报告厅" },
  { title: "各地市领队与嘉宾合影", time: "9:00—9:20", timeInfo: "", addressBrief: "", address: "郑州旅游职业学院西教学楼" },
  { title: "现场创作大赛", time: "9:30-13:30", timeInfo: "限时4小时", addressBrief: "", address: "郑州旅游学院三楼大礼堂" },
  { title: "电视评审", time: "10:30-13:30", timeInfo: "", addressBrief: "", address: "郑州旅游学院三楼大礼堂" },
  { title: "现场展览", time: "14:30-17:30", timeInfo: "", addressBrief: "", address: "郑州旅游学院学院活动区" },
  { title: "自由活动、离场", time: "18:00", timeInfo: "", addressBrief: "", address: "郑州旅游学院学院活动区" }],
  
  [{ title: "书画艺术特训营", time: "7月13日-16日", timeInfo: "", addressBrief: "", address: "国家级景区" },
  { title: "艺术表演特训营", time: "7月18日-23日", timeInfo: "", addressBrief: "", address: "（另行通知）" },
  { title: "小天使颁奖典礼", time: "7月24日", timeInfo: "", addressBrief: "", address: "河南电视台<br>一号演播厅" },
  { title: "书画艺术总决赛", time: "7月24日-27日", timeInfo: "", addressBrief: "", address: "（另行通知）" },
  { title: "才艺选拔总决赛", time: "7月28日-31日", timeInfo: "", addressBrief: "", address: "（另行通知）" },
  { title: "颁奖晚会录制", time: "8月4日", timeInfo: "", addressBrief: "", address: "河南电视台" },
  { title: "韩国交流演出", time: "8月16日-23日", timeInfo: "", addressBrief: "", address: "（另行通知）" }]
];


var dynamicData = [
  [{ title: "A赛场新闻发布会暨开幕式", time: "8:00", timeInfo: "", addressBrief: "", address: "河南省宋庆龄基金会儿童影剧院" },
  { title: "西洋乐", time: "9:00—18:30", timeInfo: "（8点前报到）", addressBrief: "第一赛场", address: "学院三楼大礼堂" },
  { title: "钢琴", time: "9:00—18:30", timeInfo: "（8点前报到）", addressBrief: "第二赛场", address: "学院一楼报告厅" },
  { title: "古筝", time: "9:00—18:30", timeInfo: "（8点前报到）", addressBrief: "第三赛场", address: "教学区四楼3D实景厅" }],
  
  [{ title: "B赛场新闻发布会暨开幕式", time: "8:00-9:00", timeInfo: "（8点前报到）", addressBrief: "第一赛场", address: "学院三楼大礼堂" },
  { title: "民乐", time: "9:00—18:30", timeInfo: "（8点前报到）", addressBrief: "第一赛场", address: "学院三楼大礼堂" },
  { title: "钢琴", time: "9:00—18:30", timeInfo: "（8点前报到）", addressBrief: "第二赛场", address: "学院一楼报告厅" },
  { title: "古筝", time: "9:00—18:30", timeInfo: "（8点前报到）", addressBrief: "第三赛场", address: "教学区四楼3D实景厅" },
  { title: "形体类（武术、跆拳道、群舞）", time: "9:00—18:30", timeInfo: "（8点前报到）", addressBrief: "第四赛场", address: "河南省宋庆龄基金会儿童影剧院" },
  { title: "形体类（单双三）", time: "9:00—18:30", timeInfo: "（8点前报到）", addressBrief: "第五赛场", address: "河南省宋庆龄基金会一楼中华厅" }],
  
  [{ title: "声乐", time: "9:00—18:30", timeInfo: "（8点前报到）", addressBrief: "第一赛场", address: "学院三楼大礼堂" },
  { title: "钢琴", time: "9:00—18:30", timeInfo: "（8点前报到）", addressBrief: "第三赛场", address: "教学区四楼3D实景厅" },
  { title: "形体类（群舞）", time: "9:00—18:30", timeInfo: "（8点前报到）", addressBrief: "第四赛场", address: "河南省宋庆龄基金会儿童影剧院" },
  { title: "形体类（单双三）", time: "9:00—18:30", timeInfo: "（8点前报到）", addressBrief: "第五赛场", address: "河南省宋庆龄基金会一楼中华厅" }],
  
  [{ title: "加急赛场", time: "7月15日-17日", timeInfo: "", addressBrief: "A赛场", address: "学院教学区二楼多媒体厅" }]
  
  ];

var template = "<div class='item'>"
                +"<h3>{{title}}</h3>"
                +"<div class='info fun-grid'>"
                  +"<div class='left-info col-xs-6'>"
                  +"<time>{{time}}</time>"
                  +"<p>{{timeInfo}}</p>"
                  +"</div>"
                  +"<div class='right-info col-xs-6'>"
                    +"<p>{{addressBrief}}</p>"
                    +"<p>{{address}}</p>"
                  +"</div>"
                +"</div>"
               +"</div>";

// 创建动态类节目的HTML
function createDynamicHTML() {
  var html = "";
  dynamicData.forEach(function( item, index ) {
    html += "<div class='content-list'>";
    item.forEach(function( item, index ) {
      html += template.replace(/{{([^}}]+)?}}/g, function( s0, s1 ){
        return item[s1];
      });
    });
    html += "</div>";
  });
  content.insertAdjacentHTML( "beforeend", html );
};

// 创建静态类的HTML
function createStaticHTML() {
  var html = "";
  staticData.forEach(function( item, index ) {
    html += "<div class='content-list'>";
    item.forEach(function( item, index ) {
      html += template.replace(/{{([^}}]+)?}}/g, function( s0, s1 ){
        return item[s1];
      });
    });
    html += "</div>";
  });
  content.insertAdjacentHTML( "beforeend", html );
};

// tab，点击滑动切换
var clientWidth = document.documentElement.clientWidth;
var content = document.getElementById( "content" ),
    contentList = null,
    titleList = document.querySelectorAll( "#title-list li" ),
    listIndex = 0,
    length = titleList.length;

function setContainer() {
  clientWidth = document.documentElement.clientWidth;
  contentList = document.querySelectorAll( "#content .content-list" );
  content.style.width = clientWidth * contentList.length + "px";
  [].forEach.call(contentList, function( item, index ) {
    item.style.width = clientWidth + "px";
    item.addEventListener( "touchstart", touchStart, false );
    item.addEventListener( "touchmove", touchMove, false );
    item.addEventListener( "touchend", touchEnd, false );
  });
  content.style.height = contentList[0].offsetHeight + "px";
};

window.addEventListener( "resize", setContainer, false );

var startX = 0,
    startY = 0,
    ready = true;
function touchStart( e ) {
  var t = e.touches[0];
  startX = t.pageX;
  startY = t.pageY;
};

function touchMove( e ) {
  var t = e.touches[0];
  var x = startX - t.pageX,
      y = startY - t.pageY;
  if ( Math.abs(x) > 20 && Math.abs(y) < 20 ) {
    e.preventDefault();
  };
  
  if ( Math.abs(x) > 70 && Math.abs(y) < 20 && ready ) {
    x > 0 ? listIndex++ : listIndex--;
    ( listIndex >= length ) && ( listIndex = length - 1 );
    ( listIndex < 0 ) && ( listIndex = 0 );
    ready = !ready;
    showContainer( listIndex );
  }
};
function touchEnd( e ) {
  ready = !ready;
};
// 顶部监听
[].forEach.call(titleList, function( item, index ) {
  item.addEventListener("click", function() {
    showContainer( index );
  },false);
});
function showContainer( index ) {
  listIndex = index;
  contentList = document.querySelectorAll( "#content .content-list" );
  [].forEach.call(titleList, function( item, index ) {
    item.classList.remove( "active" );
  });
  content.style.height = contentList[index].offsetHeight + "px";
  titleList[index].classList.add( "active" );
  content.style.marginLeft = - ( index * clientWidth ) + "px";
};

var way = "<div class='list'>"
         +"<h3 class='title'>驾车路线</h3>"
         +"<address>A赛场（郑州旅游职业学院）：</address>"
         +"<p>走京珠、连霍等高速及107国道进郑车辆，驶入中州大道，行至航海路立交桥向西，过未来大道（即：未来路）继续向西600米，豫英街向北50米即到。</p>"
         +"<address>B赛场（河南省宋庆龄基金会）：</address>"
         +"<p>走京珠、连霍等高速及107国道进郑车辆，驶入中州大道，行至农业东路出口，向东，沿农业东路向东直行，至九如东路，向南600米，路西即到。</p>"
         +"</div><div class='list'>"
         +"<h3 class='title'>乘车路线</h3>"
         +"<address>A赛场（郑州旅游职业学院）：</address>"
         +"<p>火车站/汽车总站乘“B17路”或“38路”（至公交八公司方向 06:00-21:00），共14站，【直达】至航海东路【陈家门站】，向北步行391米，即至郑州旅游职业学院。</p>"
         +"<address>B赛场（河南省宋庆龄基金会）：</address>"
         +"<p>火车站\汽车总站乘105路，共24站，【直达】至【九如东路】下车，向南600米路西即到。</p>"
         +"</div>";

var notice = "<div class='list'>"
            +"<h3 class='title'>静态类</h3>"
            +"<p>在作品评审过程中，评审团暨现场导演组挑选出部分最有特色的作品及选手，颁发《入选通知书》，参加本次艺术节《“中艺大师之约”青少年书画艺术精英特训营》。由河南大师团跟班指导、河南电视台全程跟踪拍摄，以电视真人秀的形式制作河南省书画大师与青少年书画艺术人才特训活动的电视纪录片。</p>"
            +"</div>"
           
            +"<div class='list'>"
            +"<h3 class='title'>动态类</h3>"
            +"<ol><li>入围选手从现场晋升通道，至采访区，接受电视专访；</li>"
            +"<li>群舞类节目，不设立现场投票环节，比赛全部结束后，由评审组综合会审，评选出入围电视颁奖晚会的节目，直接参加7月24日的电视颁奖晚会。</li><ol>"
            +"</div>"
           
            +"<div class='list'>"
            +"<h3 class='title'>其他</h3>"
            +"<ol><li>本次艺术节为电视台实况录制，精选播出，请动态类选手着演出服参赛。</li>"
            +"<li>所有选手须佩戴“参赛证”各自进入赛场，领队老师佩戴领队证，陪同家长佩戴相应陪同证，根据“参赛手册”上的时间、序号的安排，提前半小时到各赛场参加比赛，落实伴奏音乐（MP3\CD格式，需双备份）。</li>"
            +"<li>单项选手10人为一组，提前备场，根据工作人员提示，进入候场区备场，节目表演完毕后，在下场口备评区等待，本组十人全部比赛完以后，由评审组现场点评，选出入围颁奖典礼的选手，从晋级通道离开，凭《入选通知书》及演员证到采访区接受电视专访，拍摄形象剧照，其他选手统一离开赛场。</li>"
            +"<li>若因个人原因错过比赛时间，组委会不承担任何责任，如需补赛，请至组委会秘书处填写申请表，在本场结束后最后一个节目方可补赛。</li>"
            +"<li>所有需进入赛场的亲友团人员，均需在各赛场服务台，领取相应证件，凭证件进入赛场。</li><ol>"
            +"</div>";
  
var size = "<div class='size-list'><h3>第一赛场<span>（学院三楼大礼堂）</span></h3><p>台口宽16.5米，纵深10米，坐北面南</p></div>"
          +"<div class='size-list'><h3>第二赛场<span>（学院一楼报告厅）</span></h3><p>台口宽12米，纵深6米，坐南面北</p></div>"
          +"<div class='size-list'><h3>第三赛场<span>（教学区四楼3D实景厅）</span></h3><p>台口宽 8米，纵深3米，坐西面东</p></div>"
          +"<div class='size-list'><h3>第四赛场<span>（河南省宋庆龄基金会儿童影剧院）</span></h3><p>台口宽16米，纵深12米，坐北面南</p></div>"
          +"<div class='size-list'><h3>第五赛场<span>（河南省宋庆龄基金会一楼中华厅）</span></h3><p>台口宽12米，纵深6米，坐南面北</p></div>"
          +"<div class='size-list'><h3>第六赛场<span>（学院教学区二楼多媒体厅）</span></h3><p>台口宽6米，纵深3米，坐西面东</p></div>";
            
var requirement = "<div class='list'>"
                 +"<h3 class='title'>静态类</h3>"
                 +"<ol><li>选手现场创作所需材料自备</li>"
                 +"<li>开幕式结束后由工作人员引导至指定赛场备考（根据考场门贴提示入场）</li>"
                 +"<li>比赛正式开始后所有陪同人员须撤离赛场，有特殊情况领队老师可凭证件进入</li>"
                 +"<li>参赛作品完成后提交至三楼作品电视评审室，由评审团现场点评，入围颁奖晚会的选手由晋级通道离开，至秘书处办理入围手续，凭《晋级函》并佩戴演员证到采访区接受电视专访，其他未入围选手可自行离开。</li><ol>"
                 +"</div>"
                 
                 +"<div class='list'>"
                 +"<h3 class='title'>动态类</h3>"
                 +"<ol><li>参赛节目音乐及伴奏音乐需在7月8日前，发至组委会指定电子信箱（见下），另建议携带备份音乐（电脑MP3格式和CD格式光盘双备份），避免因特殊原因无法正常播放而影响比赛；</li>"
                 +"<li>器乐组的选手，除钢琴（施坦威大三角）、架子鼓外，另提供两台古筝（如需使用组委会提供的古筝，曲调需自行调试），其他小件乐器自备，如有特殊要求，请提前与各自大区主任或组委会联系。</li><ol>"
                 +"</div>";

var tipJSON = { requirement: requirement, size: size, way: way, notice: notice };
var footer = document.getElementById( "competition-footer" ),
    footerLi = document.querySelectorAll( "#competition-footer li" );
[].forEach.call(footerLi, function( item, index ) {
  item.addEventListener( "click", fnShowPop, false );
});

function fnShowPop() {
  var k = this.getAttribute( "data-tipkey" ),
      popTitle = this.innerHTML,
      popHTML = tipJSON[k];
  var popContainer = document.createElement( "section" );
  popContainer.setAttribute( "class", "popup" );
  popContainer.innerHTML = "<div class='navbar'><h3 class='title'> " + popTitle + "<span class='ok'>返回</span></h3></div>"
                          +"<div class='content'>" + popHTML + "</div>";
  document.body.appendChild( popContainer );
  document.body.style.overflow = "hidden";
  setTimeout(function(){
    popContainer.classList.add( "popup-in" );  
  },0);
  var ok = popContainer.querySelector( ".navbar .ok" );
  ok.addEventListener("click", function() {
    popContainer.classList.remove( "popup-in" );
    document.body.style.overflow = "auto";
    setTimeout(function(){
      document.body.removeChild( popContainer );
    }, 300);
  }, false);
};
